<template>
  <view>
    <!-- 自定义搜索组件 -->
    <my-search @my-click="gotoSearch()"></my-search>

    <!-- 分类列表 -->
    <view class="cate-wrapper">
      <!-- 左侧分类导航 -->
      <scroll-view
        class="cate-left"
        scroll-y="true"
        :style="{ height: wh + 'px' }"
      >
        <view
          :class="['cate-title', id == active ? 'active' : '']"
          @click="activeHandler(id, item)"
          v-for="(item, id) in cateList"
          :key="id"
        >
          {{ item.cat_name }}
        </view>
      </scroll-view>

      <!-- 右侧二级分类 -->
      <scroll-view
        class="cate-right"
        scroll-y="true"
        :style="{ height: wh + 'px' }"
        :scroll-top="scrollTop"
      >
        <!-- 二级分类包裹容器 -->
        <view class="cate-level2" v-for="(item, id) in cateLevel2" :key="id">
          <!-- 二级分类名 -->
          <view class="cate-level2-name">
            /&nbsp;{{ item.cat_name }}&nbsp;/
          </view>
          <!-- 三级分类包裹容器 -->
          <view class="cate-level3">
            <!-- 三级分类 -->
            <view
              class="cate-level3-item"
              v-for="(item2, id2) in item.children"
              :key="id2"
              @click="gotoGoodsList(item2)"
            >
              <!-- 三级分类图片 -->
              <image
                :src="item2.cat_icon.replace('dev', 'web')"
                mode="widthFix"
              ></image>
              <!-- 三级分类名 -->
              <view class="cate-level3-name">
                {{ item2.cat_name }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import mySearch from "/src/components/my-search/index";
export default {
  name: "cate",
  components: { mySearch},
  props: {},
  data() {
    return {
      wh: 0, // 当前窗口高度
      cateList: [], //分类列表数据
      active: 0, // 分类列表是否被选中
      cateLevel2: [], // 二级分类
      scrollTop: 0, // 滚动条保持top0的地方
    };
  },
  computed: {},
  methods: {
    // 获取分类列表数据
    async getCateList() {
      const res = await uni.$http.get("/api/public/v1/categories");
      this.cateList = res.data.message;
      this.cateLevel2 = this.cateList[0].children;
    },
    // 处理点击分类后的 样式变化，给二级分类赋值，滚动条回到起点
    activeHandler(i, item) {
      this.active = i;
      this.cateLevel2 = item.children;
      this.scrollTop = !this.scrollTop;
    },
    // 路由跳转到商品界面
    gotoGoodsList(item) {
      uni.navigateTo({
        url: `/subpkg/goods_list/index?cid=${item.cat_id}`,
      });
    },
    // 路由跳转到搜索
    gotoSearch(){
      uni.navigateTo({
        url:'/subpkg/search/index',
      })
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
    this.wh = uni.getSystemInfoSync().windowHeight - 50;
    this.getCateList();
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
.cate-wrapper {
  display: flex;
  .cate-left {
    width: 120px;
    .cate-title {
      background-color: #f7f7f7;
      line-height: 60px;
      text-align: center;
      font-size: 12px;
      &.active {
        background-color: #fff;
        position: relative;
        &::before {
          content: "";
          display: block;
          width: 3px;
          height: 30px;
          background-color: #c00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .cate-right {
    .cate-level2 {
      display: flex;
      flex-direction: column;
      .cate-level2-name {
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        font-weight: bold;
      }

      .cate-level3 {
        display: flex;
        flex-wrap: wrap;
        .cate-level3-item {
          width: 33.3%;
          padding: 10px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;

          image {
            width: 120rpx;
            height: 120rpx;
            margin: 0 auto;
          }
          .cate-level3-name {
            text-align: center;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>